<template>
  <div class="div">
    <!-- top-div -->
    <div class="top-div">
      <div class="top-div-p">
        <span></span>
        <p>实时数据概况</p>
      </div>
      <div class="top-div-rectangle">
        <div class="top-div-rectangle-01">
          <div class="top-div-rectangle-01-01">88</div>
          <div>总客户数</div>
        </div>
        <div class="top-div-rectangle-01">
          <div class="top-div-rectangle-01-01">88</div>
          <div>今日新增</div>
        </div>
        <div class="top-div-rectangle-01">
          <div class="top-div-rectangle-01-01">88</div>
          <div>待审核</div>
        </div>
        <div class="top-div-rectangle-01">
          <div class="top-div-rectangle-01-01">88</div>
          <div>今日未下单客户</div>
        </div>
      </div>
    </div>
    <!-- mid-div -->
    <div class="mid-div">
      <div class="mid-div-p">
        <span></span>
        <p>7天客户下单排行榜TOP10</p>
        <el-button class="mid-div-btn">查看详情</el-button>
      </div>
    </div>
    <!-- bottom-div -->
    <div class="bottom-div">
      <div class="bottom-div-p">
        <span></span>
        <p>客户增量趋势</p>
      </div>

      <div id="mainsss" style="width: 1222px; height: 400px"></div>
    </div>
  </div>
</template>

<script>
//引入echarts。
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    //基于准备好的dom元素，初始化echarts图表。
    var myChart = echarts.init(document.getElementById('mainsss'))
    //绘制图表。
    myChart.setOption({
      title: {
        // text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['2021-01-01', '2021-01-01', '2021-01-01', '2021-01-01', '2021-01-01', '2021-01-01','2021-01-01','2021-01-01'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20,10,20,10],
        },
      ],
    })
  },
}
</script>

<style scoped lang="scss">
.div {
  padding: 0;
  margin: 0;
  background-color: rgb(246 248 249);
  .top-div {
    width: 100%;
    height: 180px;
    background-color: white;
    .top-div-p {
      margin-left: 40px;
      span {
        display: inline-block;
        width: 3px;
        height: 11px;
        background-color: rgb(0 0 0 / 70%);
        margin-bottom: -1px;
      }
      p {
        margin-left: 7px;
        display: inline-block;
        font-size: 13px;
        font-weight: bold;
        height: 15px;
      }
    }
    .top-div-rectangle {
      width: 99%;
      display: flex;
      .top-div-rectangle-01 {
        margin-left: 20px;
        margin-right: 5px;
        height: 120px;
        flex: 1;
        text-align: center;
        border: 2px solid rgb(246 246 246);
        .top-div-rectangle-01-01 {
          margin-top: 30px;
          margin-bottom: 5px;
          font-size: 32px;
        }
      }
    }
  }
  .mid-div {
    width: 100%;
    height: 350px;
    background-color: white;
    margin: 20px 0;
    .mid-div-p {
      margin-left: 40px;
      position: relative;
      span {
        display: inline-block;
        width: 3px;
        height: 11px;
        background-color: rgb(0 0 0 / 70%);
        margin-bottom: -1px;
      }
      p {
        margin-left: 7px;
        display: inline-block;
        font-size: 13px;
        font-weight: bold;
        height: 15px;
      }
      .mid-div-btn {
        padding: 0 10px;

        height: 26px;
        position: absolute;
        right: 15px;
        top: 8px;
      }
    }
  }
  .bottom-div {
    width: 100%;
    height: 450px;
    background-color: white;
    .bottom-div-p {
      margin-left: 40px;
      span {
        display: inline-block;
        width: 3px;
        height: 11px;
        background-color: rgb(0 0 0 / 70%);
        margin-bottom: -1px;
      }
      p {
        margin-left: 7px;
        display: inline-block;
        font-size: 13px;
        font-weight: bold;
        height: 15px;
      }
    }
  }
}
</style>
